:root {
  /* Color System */
  --color-primary-50: #ffffff;
  --color-primary-100: #ffffff;
  --color-primary-200: #fcebf3;
  --color-primary-300: #f4bfd9;
  --color-primary-400: #ed7ab3;
  --color-primary-500: #ec4899;
  --color-primary-600: #ee137f;
  --color-primary-700: #dd0a72;
  --color-primary-800: #c00461;
  --color-primary-900: #98034d;

  --color-secondary-50: #ffffff;
  --color-secondary-100: #ffffff;
  --color-secondary-200: #ffffff;
  --color-secondary-300: #e2d7fa;
  --color-secondary-400: #af8ff6;
  --color-secondary-500: #8b5cf6;
  --color-secondary-600: #6626f9;
  --color-secondary-700: #5307fe;
  --color-secondary-800: #4500e2;
  --color-secondary-900: #3800b9;

  --color-neutral-50: #ffffff;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #ffffff;
  --color-neutral-300: #ffffff;
  --color-neutral-400: #ffffff;
  --color-neutral-500: #e5e7eb;
  --color-neutral-600: #c6ccd7;
  --color-neutral-700: #b4bdd0;
  --color-neutral-800: #9aa9c6;
  --color-neutral-900: #8092b7;

  /* Typography */
  --font-family-heading: Caveat, cursive;
  --font-family-body: Inter, system-ui, sans-serif;
  --font-size-base: 18px;
  --line-height: 1.6;
  --heading-scale: 1.4;
  --heading-weight: 500;

  /* UI Style */
  --border-radius: 20px;
  --shadow-level: 2;
  --spacing-scale: 1.2;
  --button-style: 2;
  --animation-level: 2;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #8092b7;
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
  }
}
